<script setup>
import {getHot} from "@/api/enterprise/hot";

import {useRouter} from 'vue-router'

const router = useRouter();
const data = reactive({
  formHot: {},
  form: {},
  queryParamsHot: {
    userId: null,
    shareCode: null,
    shareName: null,
    activity: '',
    boardName: '',
    boardNameKey: '',
    area: ''
  }
});

const {queryParamsHot, formHot } = toRefs(data);

/** 修改按钮操作 */
function handleUpdate() {
  console.log('this.$route', router)
  const id = router.currentRoute.value.params.id
  console.log('id', id) // 输出路由参数的值
  getHot(id).then(response => {
    console.log('response.data', response.data);
    form.value = response.data;
    open.value = true;
  });
}

handleUpdate()

function handleTC(tc) {
  // console.log('tc', typeof tc)
  // return tc
  return tc.replace(/(#)/g, ', ')
}
</script>

<template>
  <el-form ref="hotRef" :model="formHot" label-width="80px">
    <el-form-item>
      <el-row :gutter="10" style="width: 100%">
        <el-col :span="8">
          <el-form-item label="用户id">
            <el-text class="mx-1" type="danger">{{ form.userId }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="股票名称">
            <el-text class="mx-1" type="danger">{{ form.shareName }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="股票代码">
            <el-text class="mx-1" type="danger">{{ form.shareCode }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="width: 100%">
        <el-col :span="8">
          <el-form-item label="活跃度">
            <el-text class="mx-1" type="danger">{{ form.activity }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="核心题材">
            <el-text class="mx-1" type="danger">{{ form.boardNameKey }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地区">
            <el-text class="mx-1" type="danger">{{ form.area }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item class="text-wrapper">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="题材" :align='center'>
            <div v-html="handleTC(form.boardName)"></div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
  </el-form>
  <el-form ref="hotRef" :model="form" label-width="80px">
    <el-form-item>
      <el-row :gutter="10" style="width: 100%">
        <el-col :span="8">
          <el-form-item label="用户id">
            <el-text class="mx-1" type="danger">{{ form.userId }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="股票名称">
            <el-text class="mx-1" type="danger">{{ form.shareName }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="股票代码">
            <el-text class="mx-1" type="danger">{{ form.shareCode }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="width: 100%">
        <el-col :span="8">
          <el-form-item label="活跃度">
            <el-text class="mx-1" type="danger">{{ form.activity }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="核心题材">
            <el-text class="mx-1" type="danger">{{ form.boardNameKey }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地区">
            <el-text class="mx-1" type="danger">{{ form.area }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item class="text-wrapper">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="题材" :align='center'>
            <div v-html="handleTC(form.boardName)"></div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
